<template>
    <div class="container">
        <div class="container-content">
            <div class="content-title">商品管理</div>
            <div class="edit-btn">
                <el-button type="primary" @click="addData()">新 增</el-button>
            </div>
            <el-table :data="goodsList" style="width: 100%">
                <el-table-column prop="id" label="ID" width="180"></el-table-column>
                <el-table-column prop="name" label="商品名称"></el-table-column>
                <el-table-column prop="price" label="商品价格"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="280"></el-table-column>
                <el-table-column prop="updateTime" label="修改时间" width="280"></el-table-column>
                <el-table-column fixed="right" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button @click="shopItemSj(scope.row)" type="text" size="small">上架到门店</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%">
            <el-form ref="form" :model="goodsEdit" label-width="80px">
                <el-form-item label="商品名称">
                    <el-input v-model="goodsEdit.name"></el-input>
                </el-form-item>
                <el-form-item label="商品价格">
                    <el-input v-model="goodsEdit.price"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="editClose()">取 消</el-button>
                <el-button type="primary" @click="saveData()">保 存</el-button>
            </span>
        </el-dialog>

        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible2" width="40%">
            <el-form ref="form" :model="goodsEdit" label-width="80px">
                <el-form-item label="上架门店">
                    <el-select v-model="sjShopId" placeholder="请选择商品上架的门店" style="width: 100%">
                        <el-option v-for="item in shopList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="confirmSj()">确认上架</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import {shopList, allItem, addItem, newItem} from "@/api/common";
    export default {
        name: "GoodsMgr",
        data() {
            return {
                user: {},
                dialogVisible: false,
                dialogVisible2: false,
                dialogTitle: '',
                goodsList: [],
                goodsEdit: {},
                shopList: [],
                sjShopId:'',
                sjItemId:'',
            }
        },
        created() {
            let userJson = localStorage.getItem('bus-user');
            if (userJson) {
                let user = JSON.parse(userJson);
                this.user = user
                let param = {businessId: user.id}
                this.queryList(param)
            } else {
                this.$message.info("请您重新登陆")
            }
        },
        methods: {
            queryList(param){
                allItem(param).then(res => {
                    if (res.code == 200) {
                        this.goodsList = res.data
                    }else {
                        this.$message.error(res.msg || "查询商品数据失败")
                    }
                })
            },
            addData() {
                this.goodsEdit = {};
                this.dialogTitle = '新增商品'
                this.dialogVisible = true;
            },
            editClose() {
                this.shopEdit = {};
                this.dialogTitle = '';
                this.dialogVisible = false;
            },
            saveData() {
                let param = {
                    businessId: this.user.id,
                    name: this.goodsEdit.name,
                    price: this.goodsEdit.price
                }
                addItem(param).then(res => {
                    if (res.code == 200) {
                        this.$message.info("新增成功")
                        this.editClose()
                        let param = {businessId: this.user.id}
                        this.queryList(param)
                    }else {
                        this.$message.error(res.msg || "新增失败")
                    }
                })

            },
            shopItemSj(row){
                this.sjShopId = ''
                this.sjItemId = row.id
                let param = {businessId: this.user.id}
                shopList(param).then(res => {
                    if (res.code == 200) {
                        this.shopList = res.data
                        this.dialogVisible2 = true
                    }else {
                        this.$message.error(res.msg || "查询门店数据失败")
                    }
                })
            },
            confirmSj(){
                let param={
                    shopId:this.sjShopId,
                    itemId:this.sjItemId
                }
                newItem(param).then(res => {
                    if (res.code == 200){
                        this.$message.success("上架成功")
                        this.dialogVisible2 = false
                    }else {
                        this.$message.error(res.msg || "门店上架商品失败")
                    }
                })
            }

        }
    }
</script>

<style scoped>
    .container-content {
        margin: 30px;
    }

    .content-title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .edit-btn {
        margin-bottom: 10px;
    }
</style>
